<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    // :content="params.content" :a="params.a" :b="params.b" :c="params.c"
    // 属性传的时候，使用 content-abc 这种命名，接的时候，使用 contentAbc 命名
    // 单项数据流的概念: 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据
    const app = Vue.createApp({
      data() {
        return {
          num: 123,
          // fun:()=>alert(123)
          contentAbc:1,
          params: {
            a: 1,
            b: 2,
            c: 3
          }
        }
      },
      template: `<div><test :num="num" :contentAbc="contentAbc"/></div>`
      // template: `<div><test v-bind="params"/></div>`
    })
    //type:String Boolean Array Object Function
    //required 必填
    //default 默认值
    app.component('test', {
      props: ['content', 'a', 'b', 'c','num','contentAbc'],
      /*  props: {
         content: {
           // type: Function,
           type:Number,
           required: true,
           validator: function (value) {
             return value < 1000
           },
           default: () => {
             alert(123)
           }
         }
       }, */
      data(){
        return{
          myNum:this.num
        }
      },
      methods: {
        click() {
          alert(456)
          // this.content()
        }
      },
      // template: `<div @click="myNum+=1">{{myNum}}</div>`
      // template: `<div>{{a}}-{{b}}-{{c}}</div>`
      template: `<div>{{contentAbc}}</div>`
    })
    const vm = app.mount('#root')
  </script>
</body>

</html>